<!--
 * @Author: 陈鑫茹 2182688619@qq.com
 * @Date: 2025-09-24 15:45:54
 * @LastEditors: 陈鑫茹 2182688619@qq.com
 * @LastEditTime: 2025-09-28 19:17:24
 * @FilePath: \team-workone\am-ui\src\views\dashboard\components\C222.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="charts-container">
    <div ref="right2" class="pie-chart-container" style="width: 25%; position: absolute;left: 521px;bottom: 350px;">
    </div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {
      piePlot: null, // 存储图表实例
      // 数据应放在data中管理
      chartData: [
        { type: '在线', value:4 },
        { type: '离线', value: 1 }
      ]
    };
  },
  methods: {
    // 初始化图表的方法
    initPieChart() {
      // 使用ref获取DOM元素
      const container = this.$refs.right2;
      if (!container) return;
      // 创建图表实例
      this.piePlot = new Pie(this.$refs.right2, {
        appendPadding: 10,
        data: this.chartData,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        color: ['#FF8C94', '#FFD877'],
        label: {
          type: 'outer',
          content: '{value}台',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
        },
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              fontSize: 15, // 调小字体
              textAlign: 'center', // 整体居中
              lineHeight: 1.5 // 增加行高，使换行更美观
            },
            content: '设备总数\n5',
          },
        },
      });

      // 渲染图表
      this.piePlot.render();
    }
  },
  // 组件挂载后初始化图表
  mounted() {
    this.initPieChart();
  },
  // 组件销毁前清理图表实例
  beforeDestroy() {
    if (this.piePlot) {
      this.piePlot.destroy();
    }
  }
};
</script>
<style scoped>
.pie-chart-container {
  margin: 0px 7px;
  width: 389px;
  height: 200px;
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
